<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>东台市企业服务云平台</title>
</head>
<body>
	<div th:fragment="submit_appeal">
		<style>
			html {
				height:100%;
			}
			body {
				height:100%;
				overflow:hidden;
			}
			.main .user-add {
				padding: 40px 0 20px;
				background-color: #FFF;
			}

			#fileupload {
				display: none;
			}
			.settings {
				font-size: 14px;
			}
			.upfile {
				font-size: 14px;
			}
			.uploadIcon {
				height: 18px;
				width: 18px;
			}
			.upfile a {
				color: #7dc196;
			}
		</style>

		<!-- 面包屑 -->
		<ol class="breadcrumb">
			<li><a href="javascript:;">诉求管理</a></li>
			<li class="active">诉求发布</li>
		</ol>
		<div class="user-add" id="useradd" style="overflow-x:hidden;overflow-y:auto;max-height:500px;">
			<!--诉求提交模板-->
			<div class="body application">
				<div class="settings">
					<form action="" class="form-horizontal" id="amend_form">
						<div class="form-group">
							<label for="" class="col-xs-3 control-label">诉求标题</label>
							<div class="col-xs-7">
								<input type="text" name="appealtitle" class="form-control input-sm"/>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-xs-3 control-label">诉求类别</label>
							<div class="col-xs-7">
								<select name="appealtype" class="form-control input-sm">
									<option value="">--请选择诉求类别--</option>
									<option value="1">项目审批</option>
									<option value="2">安全环保</option>
									<option value="3">“两证”办理</option>
									<option value="4">人才用工</option>
									<option value="5">融资担保</option>
									<option value="6">水电煤气</option>
									<option value="7">创新创牌</option>
									<option value="8">财税政策</option>
									<option value="9">社会保险</option>
									<option value="10">法律援助</option>
									<option value="11">其他事项</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-xs-3 control-label">诉求内容</label>
							<div class="col-xs-7">
								<textarea name="appealcontent" rows="15" id="content" class="form-control input-sm"></textarea>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-xs-3 control-label">附&nbsp;件</label>
							<div class="col-xs-7 ckeditor" style="margin-top:7px;font-size:14px;">
								<a href="#" id="btnUpload" onclick="appFile()" style="height:100%;">
									<i class="fa fa-paperclip uploadIcon"></i><span style="color:red">添加附件</span>
							    </a>
								<div id="uploads"></div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-10">
								<a href="#" class="btn btn-info btn-sm pull-right" id="submitAppeal" style="margin-left: 10px;">提 交</a> 
								<a href="javascript:;" class="btn btn-default btn-sm pull-right" id="reset">重 置</a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<input id="fileupload"
			accept="image/jpeg,image/png,image/gif,.csv,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document,
			application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
			type="file" name="file" data-url="file/upload/temp"
			multiple="multiple"/>
		<!--<hr>-->

		<script th:src="@{/assets/jquery/plugins/jquery.ui.widget.js}"></script>
		<script th:src="@{/assets/jquery/plugins/jquery.iframe-transport.js}"></script>
		<script th:src="@{/assets/jquery/plugins/jquery.fileupload.js}" type="text/javascript"></script>

		<script th:inline="javascript">
    		/*<![CDATA[*/
			var userid = userid;
			var imagepaths = [];
		
			//上传附件
			function appFile(){
				var upFiles = $(".upfile");
				
				//获取选择的 img.attr
				upFiles.each(function(index,element){
					console.log($(element).attr('attr'));
				});
				
				if(upFiles.length == 3){
					toastr.error("只能上传三个附件！", "文件上传");
				}else{
					$('input[id=fileupload]').click();
				}
			}
			
			//删除选择的图片
			function deleteImg(obj){
				var url = $(obj).attr('attr');
				$.ajax({
					type : 'get',
					url : url,
					contentType: "application/json",
					success : function(data) {
						toastr['success']("成功！", "删除");
						$(obj).parent().parent().remove();
					},
		            error: function (error) {
		                toastr['error']("失败！", "加载界面");
		                console.log(error);
		            }
				});
			}
			
			// 附件上传
			$('#fileupload').fileupload({
				singleFileUploads : true,
				dataType : 'json',
				done : function(e, data) {
					if (data.result.code == 0) {
						var uploadFiles = data.result.data;
						uploadFiles.forEach(function(filepath) {
							var imageStr = "<div class='upfile'><div class='fileName'><i class='fa fa-paperclip uploadIcon'></i>" 
											+ filepath.upFileName + "(" + (filepath.fileSize/1024).toFixed(2) + "KB)" 
											+ "<a attr='"+ filepath.deletePath 
											+"'class='delfileButton' onclick='deleteImg(this)' href='#'>&nbsp;[删除]</a></div></div>";
							$("#uploads").append(imageStr);
							imagepaths.push(filepath.serverPath);
						})
					} else {
						alert(data.result.data);
					}
					console.log(data.result);
				}
			});
			
			//文件上传前触发事件
			/* $('#fileupload').bind('fileuploadsubmit', function(e, data) {
				data.formData = {
					"userid" : userid
				}; //如果需要额外添加参数可以在这里添加
			}); */

			// 诉求提交
			$("#submitAppeal").on("click",function(){
				var imagepath;
				imagepath = imagepaths.join(",");
				var images = {};
				images.name = 'imagepaths';
				images.value = imagepath;
				var formArray = $("#amend_form").serializeArray();
					formArray.push(images);
					console.log(formArray)
				var form = arrayToJson(formArray);
				var formData = JSON.stringify(form).replace(/\\\\/g, '/');
				$.ajax({
                    url: appBaseURL+'/appeal/addAndSubmitAppeal/',
                    type: 'POST',
                    data: formData,
                    contentType: "application/json",
                    success: function (info) {
						if(info.code == 0){
							toastr.success('提交成功！','提交成功');
							setTimeout(function(){location.reload(true);},1000);
						}else{
							toastr.error("提交失败，请稍后再试！");
						}
                    },
                    error: function () {
                        toastr.error("提交失败，请稍后再试！");
                    } 
				});
			});

			// 重置
			$('#reset').on('click',function(){
				$('#amend_form')[0].reset();
			});

			// 将表单数据转化为json格式
			function arrayToJson(formArray){
			var dataArray = {};
			$.each(formArray,function(){
				if(dataArray[this.name]){
				if(!dataArray[this.name].push){
					dataArray[this.name] = [dataArray[this.name]];
				}
				dataArray[this.name].push(this.value || '');
				}else{
				dataArray[this.name] = this.value || '';
				}
			});
			return dataArray;
			}
			
			/*]]>*/
		</script>
	</div>
</body>
</html>